.openContainer{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    perspective: 4px;
    perspective-origin: 50% 50%;
    animation: hueRotate 21s infinite linear;
  }
  
  .group{
    position: relative;
    width: 500px;
    height: 500px;
    transform-style: preserve-3d;
    animation: move 12s infinite linear;
  }
  
  .group:nth-child(2){
    animation: move 12s infinite linear;
    animation-delay: -6s;
  }
  
  .item {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.5);
    background: url(https://z3.ax1x.com/2021/08/20/fLwuMd.jpg);
    background-size: cover;
    opacity: 1;
    animation: fade 12s infinite linear;
    animation-delay: 0;
  }
  
  .group:nth-child(2) .item {
    animation-delay: -6s;
  }
  
  .itemRight {
    transform: rotateY(90deg) translateZ(250px);
  }
  
  .itemLeft {
    transform: rotateY(-90deg) translateZ(250px);
  }
  
  .itemTop {
    transform: rotateX(90deg) translateZ(250px);
  }
  
  .itemBottom {
    transform: rotateX(-90deg) translateZ(250px);
  }
  
  .itemMiddle {
    transform: rotateX(180deg) translateZ(250px);
  }
  
  @keyframes move {
    0%{
      transform: translateZ(-250px) rotate(0deg);
    }
    100%{
      transform: translateZ(250px) rotate(0deg);
    }
  }
  
  @keyframes fade {
    0%{
      opacity: 0;
    }
    25%,
    60%{
      opacity: 1;
    }
    100%{
      opacity: 0;
    }
  }
  
  @keyframes hueRotate {
    0% {
      filter: hue-rotate(0);
    }
    100% {
      filter: hue-rotate(360deg);
    }
  }